<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>vue安装</title>
	<style>
		[v-cloak] {
		  display: none;
		}
	</style>
</head>
<body>

	<ul id="counter" v-cloak>
		<todo-item v-for="(item, index) in list" :key="item.id" :todo="item"></todo-item>
	</ul>
	
	<script src="../lib/vue.3.4.js"></script>
	<script>
		const app = Vue.createApp({
			data () {
				return {
					list: [
						{id: 0, text: 'Vegetables'},
						{id: 1, text: 'Cheese'},
						{id: 2, text: '开卷考试看到了'}
					]
				}
			}
		})

		app.component('todo-item', {
			template: `<li>{{todo.text}}</li>`,
			props: ['todo']
		})


		/**
		 *注：component要在mount之前注册，不然报错 Failed to resolve component: todo-item at <App>
		 */
		app.mount("#counter");
	</script>
</body>	
</html>